<template>
	<PageWrapper title="组件使用示例" contentFullHeight>
		<div>
			<TypographyTitle :level="5">表格使用示例</TypographyTitle>
			<a-button class="mr-4" @click="go('/demo/basicTable')" type="primary">基础表格示例</a-button>
			<a-button class="mr-4" @click="go('/demo/simpleUseTable')" type="primary">usetable基础示例</a-button>
			<a-button class="mr-4" @click="go('/demo-useTable')" type="primary">usetable复杂示例</a-button>
			<a-button class="mr-4" @click="go('/demo/treeTable')" type="primary">树形表格示例</a-button>
			<a-button class="mr-4" @click="go('/demo/treeAndTable')" type="primary">树+表格示例</a-button>
		</div>
		<div class="mt-3">
			<TypographyTitle :level="5">表单使用示例</TypographyTitle>
			<a-button class="mr-4" @click="go('/demo/basicForm')" type="primary">基础表单示例</a-button>
			<a-button class="mr-4" @click="go('/demo/ruleForm')" type="primary">表单验证示例</a-button>
			<a-button class="mr-4" @click="go('/demo/dynamicForm')" type="primary">动态表单示例</a-button>
			<a-button class="mr-4" @click="go('/demo-useTable')" type="primary">useform复杂示例</a-button>
		</div>
		<div class="mt-3">
			<TypographyTitle :level="5">表单页面示例</TypographyTitle>
			<a-button class="mr-4" @click="go('/demo/basicFormPage')" type="primary">基础表单页面</a-button>
			<a-button class="mr-4" @click="go('/demo/stepFormPage')" type="primary">分布表单页面</a-button>
		</div>
		<div class="mt-3">
			<TypographyTitle :level="5">文件上传</TypographyTitle>
			<a-button class="mr-4" @click="go('/demo/upload')" type="primary">文件上传示例</a-button>
		</div>
		<div class="mt-3">
			<TypographyTitle :level="5">echart图表</TypographyTitle>
			<a-button class="mr-4" @click="go('/demo/echarts')" type="primary">示例</a-button>
		</div>
		<div class="mt-3">
			<TypographyTitle :level="5">弹框</TypographyTitle>
			<a-button class="mr-4" @click="go('/demo/modal')" type="primary">示例</a-button>
		</div>
		<div class="mt-3">
			<TypographyTitle :level="5">抽屉</TypographyTitle>
			<a-button class="mr-4" @click="go('/demo/drawer')" type="primary">示例</a-button>
		</div>
	</PageWrapper>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { TypographyTitle } from 'ant-design-vue';
import { PageWrapper } from '#/components';
import { useGo } from '@/hooks/web/usePage';

export default defineComponent({
	name: 'Demos',
	components: { PageWrapper, TypographyTitle },
	setup() {
		const go = useGo();
		return {
			go,
		};
	},
});
</script>
